<template>
  <div style="margin: 20px">
    <el-card>
      <div style="margin-bottom: 10px; display: flex">
        <el-input class="w-50 m-2" style="width: 200px" placeholder="请输入装备名称关键词" v-model="form.keywords" />
        <el-button style="margin-left: 10px" type="primary" @click="get">关键词搜索</el-button>
        <el-button @click="toAdd">新增装备类型</el-button>
      </div>
      <el-table :data="state.tableData" :border="true" highlight-current-row>
        <el-table-column sortable prop="equipmentMark" label="装备标识" width="120" />
        <el-table-column sortable prop="equipmentType" label="装备名称" width="150" />
        <el-table-column prop="description" label="装备说明" />
        <el-table-column sortable prop="priceGroupName" label="价格组" width="250" />
        <el-table-column sortable prop="type" label="车型" width="150" />
        <el-table-column fixed="right" label="操作" width="200">
          <template v-slot="scope">
            <el-button link size="small" @click="toEdit(scope.row)">编辑</el-button>
            <el-popconfirm title="是否确认删除该项？" confirm-button-text="是" cancel-button-text="否"
                           @confirm="doDel(scope.row.equipmentMark)">
              <template #reference>
                <el-button link type="danger" size="small">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination class="pagination" v-model:current-page="form.current" v-model:page-size="form.size"
                     :page-sizes="[10, 20, 50]" :small="false" :disabled="false" :background="true"
                     layout="total, sizes, prev, pager, next, jumper" :total="state.total" @size-change="handleSizeChange"
                     @current-change="handleCurrentChange" />
    </el-card>
    <el-dialog v-model="dlgState.visible" :title="dlgState.title" :width="600" @close="clean">
      <el-form :model="dlgState.form" ref="dlg_form">
        <el-form-item label="装备标识：" prop="name" required>
          <el-input v-model="dlgState.form.equipmentMark" :disabled="!dlgState.isAdd"></el-input>
        </el-form-item>
        <el-form-item label="装备名称：" prop="name" required>
          <el-input v-model="dlgState.form.equipmentType"></el-input>
        </el-form-item>
        <el-form-item label="装备描述：" prop="description">
          <el-input v-model="dlgState.form.description" type="textarea" :rows="3"></el-input>
        </el-form-item>
        <el-form-item label="价格组：" prop="priceGroupId">
          <el-select style="width: 150px;" placeholder="请选择价格组" v-model="dlgState.form.priceGroupId">
            <el-option value="0" label="无" ></el-option>
            <el-option v-for="(item, index) in groupList" :key="index" :label="item.name"
                       :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancelAdd">返回</el-button>
                    <el-button type="primary" @click="doAdd" v-if="dlgState.isAdd">
                        新增
                    </el-button>
                    <el-button type="primary" @click="doEdit" v-else> 保存 </el-button>
                </span>
      </template>
    </el-dialog>
  </div>
  <el-button @click="test"></el-button>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";
import router from "@/router";
//import projectApi from "@/api/infrasturcture/project";
import equipmentTypeApi from "@/api/equipment/type";
import priceGroupApi from "@/api/equipment/priceGroup";

// type definition
type type = {
  equipmentMark: string;
  equipmentType: string;
  description: string;
  priceGroupId: number;
};

// tableData
const form = reactive({
  current: 1,
  keywords: "",
  size: 10,
});
const state = reactive({
  total: 0,
  tableData: [] as Array<type>,
});
const handleSizeChange = (val: number) => {
  form.size = val;
  get();
};
const handleCurrentChange = (val: number) => {
  form.current = val;
  get();
};
const get = () => {
  equipmentTypeApi.get(form).then((res) => {
    if (res.data.code === 200) {
      state.tableData = res.data.data.records;
      state.total = res.data.data.total;
    }
  });
};
// 对话框
const dlg_form = ref();
const dlgState = reactive({
  visible: false,
  isAdd: true,
  title: "新增装备类型",
  form: {
    equipmentMark: "",
    equipmentType: "",
    description: "",
    priceGroupId: 0
  },
});
const toAdd = () => {
  dlgState.isAdd = true;
  dlgState.title = "新增装备类型"
  dlgState.visible = true;
};
const cancelAdd = () => {
  dlgState.visible = false;
};
const doAdd = () => {
  if (dlgState.form.equipmentMark == "") {
    ElMessage.error("请输入装备标识")
  } else if (dlgState.form.equipmentType == "") {
    ElMessage.error("请输入装备名称")
  }else {
    equipmentTypeApi.saveOrUpdate(dlgState.form).then((res) => {
      if (res.status === 200) {
        if (res.data.code === 500) {
          ElMessage.error("操作失败");
        } else {
          ElMessage.success("操作成功");
          dlgState.visible = false;
        }
        get();
      }
    });
  }

};
const clean = () => {
  dlgState.form = {
    equipmentMark: "",
    equipmentType: "",
    description: "",
    priceGroupId: 0
  };
};

const toEdit = (row: type) => {
  console.log(groupList)
  dlgState.form = row;
  dlgState.isAdd = false;
  dlgState.title = "编辑项目"
  dlgState.visible = true;
  console.log(editForm.form);
};
const doEdit = () => {
  if (dlgState.form.equipmentType == "") {
    ElMessage.error("请输入装备名称")
  }else {
    equipmentTypeApi.saveOrUpdate(dlgState.form).then((res) => {
      console.log(res);
      if (res.status === 200) {
        if (res.data.code === 500) {
          ElMessage.error("操作失败");
        } else {
          ElMessage.success("操作成功");
          dlgState.visible = false;
        }
        get();
      }
    });
  }
};


// 项目删除
const doDel = (mark: string) => {
  equipmentTypeApi.deleteType(mark).then((res) => {
    if (res.status === 200) {
      ElMessage.success("删除成功");
      get();
    }
  });
};
// 项目编辑
const editForm = reactive({
  form: {
    name: "",
    type: 1,
    description: "",
  },
});

const test = () => {
  console.log(router.options.routes);
};
const groupList = ref([] as Array<any>)
const getGroup = () => {
  priceGroupApi.getAll().then((res) => {
    groupList.value = res.data.data
  })
}

onMounted(() => {
  get();
  getGroup();

});

</script>
<style lang="scss" scoped>
.tabs>.el-tabs__content {
  width: 100%;
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.tabs {
  margin: 20px;
}
</style>
